<style>
    .checkin-box .layui-card-header,.checkin-box .layui-card-body{
        border:2px solid;
        border-radius:5px;
        color: #FFFFFF;
        background-color: #5FB878;
    }

    #starttime, #time{
        font-size: 14px;
        font-weight: bold;
        font-family: Arial, sans-serif;
    }

    #time{
        font-size: 20px;
        font-family: "Times New Roman";
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>当前签到</legend>
        </fieldset>

        <div class="layui-row add-checkin-box">
            <div class="layui-col-md6 layui-col-md-offset3 layui-col-xs12 layui-card layui-bg-gray" align="center">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <p>当前未开始签到</p>
                    <button class="layui-btn layui-btn-primary" id="setCheckin">设置签到</button>
                </div>
            </div>
        </div>

        <div class="layui-row checkin-box" style="display: none">
            <div class="layui-col-md6 layui-col-md-offset3 layui-col-xs12">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <span id="courseName">数据结构</span> -- <span id="classroomName">第十教学楼302</span><br>
                    </div>
                    <div class="layui-card-body">
                        <div align="center">
                            <p>
                                开始于：<span id="starttime"> 2021-1-21 12：20：12</span>
                            </p>
                            还剩：<span id="time"></span>

                        </div>
                        <div align="right">
                            <button class="layui-btn layui-btn-sm layui-btn-primary" id="cancelCheckin">取消签到</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>历史签到</legend>
        </fieldset>

        <table class="layui-hide" id="checkinInfo" lay-filter="checkinInfo"></table>

        <script type="text/html" id="checkinToolBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="detail">查看</a>
        </script>

    </div>
</div>
<script th:inline="none">

    var checkinId;

    layui.use(['table', 'miniPage','jquery'], function () {
        var checkinTable = layui.table,
            miniPage = layui.miniPage,
            $ = layui.jquery;

        var eduTeacher = JSON.parse(sessionStorage.getItem("eduTeacher"));

        var goingCheckinId = 0;

        /*签到信息表格*/
        checkinTable.render({
            elem: "#checkinInfo",
            url: 'http://localhost/api/teacher/checkins',
            headers: {token: eduTeacher.token},
            cols: [[
                {field: "course", title: "课程", width: 120, templet: function (data){
                    return "<div>"+data.course.name+"</div>"
                    }},
                {field: "classroom", title: "教室", templet: function (data){
                        return "<div>"+data.classroom.location+"</div>"
                    }},
                {field: "starttime", title: "开始时间"},
                {field: "finishtime", title: "结束时间"},
                {field: "status", title: "状态", templet: function (data) {

                        if (data.status === 0){

                            $(".add-checkin-box").hide(); //隐藏设置签到界面
                            $(".checkin-box").show(); //显示当前签到界面

                            //记录当前正在进行中的签到Id
                            goingCheckinId = data.id;

                            //获取剩余时间并显示
                            var currentTime = new Date();
                            var finishTime = new Date(data.finishtime);

                            TimeDown("time", finishTime.getTime() - currentTime.getTime());

                            $("#courseName").text(data.course.name);

                            $("#classroomName").text(data.classroom.location);

                            return "<div><span class=\"layui-badge layui-bg-green\">进行中</span></div>"
                        }else if(data.status === 1){
                            return "<div><span class=\"layui-badge\">已结束</span></div>"
                        }else if(data.status === 2){
                            return "<div><span class=\"layui-badge layui-bg-orange\">已取消</span></div>"
                        }
                    }},
                {title: '操作', minWidth: 150, toolbar: '#checkinToolBar', align: "center"}
            ]],
            parseData: function (result) {
                return {
                    "code"  : result.code,
                    "msg"   : result.msg,
                    "count" : result.data.length,
                    "data"  : result.data,
                }
            },
            limits: [5, 10],
            limit: 5,
            page: true,
            skin: 'line'
        });

        /*行功能监听*/
        checkinTable.on('tool(checkinInfo)',function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if(layEvent === "detail"){

                checkinId = data.id;

                //填充内容
                var content = miniPage.getHrefContent('checkin/detail');
                //窗口尺寸数据
                var openWH = miniPage.getOpenWidthHeight();

                var detail = layer.open({
                    title: '签到详情',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    content: content,
                });

                $(window).on("resize", function () {
                    layer.full(detail);
                });
                return false;
            }
        });

        /*设置签到按钮监听*/
        $("#setCheckin").click(function () {

            //填充内容
            var content = miniPage.getHrefContent('checkin/add');
            //窗口尺寸数据
            var openWH = miniPage.getOpenWidthHeight();

            var detail = layer.open({
                title: '签到详情',
                type: 1,
                shade: 0.2,
                shadeClose: true,
                area: [openWH[0]/2 + 'px', openWH[1]/2 + 'px'],
                content: content,
            });

            $(window).on("resize", function () {
                layer.full(detail);
            });
        });

        /*设置取消签到按钮监听*/
        $("#cancelCheckin").click(function () {

            layer.open({
                title: '取消签到',
                type: 0,
                shade: 0.2,
                shadeClose: true,
                content: '你确定要取消本次签到吗？',
                yes: function () {
                    $.ajax({
                        url: "http://localhost/api/teacher/checkin/cancel/"+goingCheckinId,
                        headers: {"token": eduTeacher.token},
                        type: "post",
                        success: function () {
                            layer.open({
                                type: 0,
                                content: '本次签到已取消！',
                                yes: function () {
                                    //刷新页面
                                    window.location.reload();
                                }
                            });
                        }
                    })
                }
            })

        });
    });

    /*倒计时*/
    function TimeDown(id, value) {

        //倒计时的总秒数
        var totalSeconds = parseInt(value / 1000);

        //取模（余数）
        var modulo = totalSeconds % (60 * 60 * 24);
        //小时数
        var hours = Math.floor(modulo / (60 * 60));
        modulo = modulo % (60 * 60);
        //分钟
        var minutes = Math.floor(modulo / 60);
        //秒
        var seconds = modulo % 60;

        hours = hours.toString().length == 1 ? '0' + hours : hours;
        minutes = minutes.toString().length == 1 ? '0' + minutes : minutes;
        seconds = seconds.toString().length == 1 ? '0' + seconds : seconds;

        //输出到页面
        document.getElementById(id).innerHTML = hours + ":" + minutes + ":" + seconds;
        //延迟一秒执行自己
        if(hours == "00" && minutes == "00" && parseInt(seconds)-1<0){
            layer.open({
                type: 0,
                content: '本次签到已结束！',
                yes: function () {
                    //刷新页面
                    window.location.reload();
                }
            });
        }else{
            setTimeout(function () {
                TimeDown(id, value-1000);
            }, 1000)
        }

    }
</script>